<template>
  <div class="region-language-flyout" style="top: -24.44em; height: 24.44em;">
    <div class="region-language-header">
      <div class="region-language-heading">国家/ 语言</div>
    </div>
    <div class="regions-wrapper" aria-labelledby="change-region">
      <ul class="regions">
        <li data-region="HK" data-language="en" data-region-label="Hong Kong" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Hong Kong - English</a></li>
        <li data-region="HK" data-language="zh" data-region-label="香港" data-language-label="繁體中文">
          <a hreflang="zh" lang="zh">香港 - 繁體中文</a></li>
        <li data-region="AU" data-language="en" data-region-label="Australia" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Australia - English</a></li>
        <li data-region="CA" data-language="en" data-region-label="Canada" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Canada - English</a></li>
        <li data-region="CN" data-language="en" data-region-label="China" data-language-label="English">
          <a href="#" hreflang="en" lang="en">China - English</a></li>
        <li data-region="CN" data-language="sc" data-region-label="中国" data-language-label="简体中文" class="selected"
            role="presentation" tabindex="0">
          <span class="placeholder">中国 - 简体中文</span><span class="sr-only">当前所选</span></li>
        <li data-region="DK" data-language="en" data-region-label="Denmark" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Denmark - English</a></li>
        <li data-region="DE" data-language="de" data-region-label="Deutschland" data-language-label="Deutsch">
          <a href="#" hreflang="de" lang="de">Deutschland - Deutsch</a></li>
        <li data-region="ES" data-language="es" data-region-label="España" data-language-label="Español">
          <a href="#" hreflang="es" lang="es">España - Español</a></li>
      </ul>
      <ul class="regions">
        <li data-region="FR" data-language="fr" data-region-label="France" data-language-label="Français">
          <a href="#" hreflang="fr" lang="fr">France - Français</a></li>
        <li data-region="IN" data-language="en" data-region-label="India" data-language-label="English">
          <a href="#" hreflang="en" lang="en">India - English</a></li>
        <li data-region="ID" data-language="en" data-region-label="Indonesia" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Indonesia - English</a></li>
        <li data-region="IT" data-language="it" data-region-label="Italia" data-language-label="Italiano">
          <a href="#" hreflang="it" lang="it">Italia - Italiano</a></li>
        <li data-region="JP" data-language="en" data-region-label="Japan" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Japan - English</a></li>
        <li data-region="JP" data-language="ja" data-region-label="日本" data-language-label="日本語">
          <a href="#" hreflang="ja" lang="ja">日本 - 日本語</a></li>
        <li data-region="KR" data-language="en" data-region-label="Korea" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Korea - English</a></li>
        <li data-region="KR" data-language="ko" data-region-label="한국" data-language-label="한국어">
          <a href="#" hreflang="ko" lang="ko">한국 - 한국어</a></li>
        <li data-region="MY" data-language="en" data-region-label="Malaysia" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Malaysia - English</a></li>
      </ul>
      <ul class="regions">
        <li data-region="NZ" data-language="en" data-region-label="New Zealand" data-language-label="English">
          <a href="#" hreflang="en" lang="en">New Zealand - English</a></li>
        <li data-region="PK" data-language="en" data-region-label="Pakistan" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Pakistan - English</a></li>
        <li data-region="PH" data-language="en" data-region-label="Philippines" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Philippines - English</a></li>
        <li data-region="RU" data-language="ru" data-region-label="Россия" data-language-label="Русский">
          <a href="#" hreflang="ru" lang="ru">Россия - Русский</a></li>
        <li data-region="QA" data-language="en" data-region-label="Qatar" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Qatar - English</a></li>
        <li data-region="SA" data-language="en" data-region-label="Saudi Arabia" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Saudi Arabia - English</a></li>
        <li data-region="CH" data-language="de" data-region-label="Schweiz" data-language-label="Deutsch">
          <a href="#" hreflang="de" lang="de">Schweiz - Deutsch</a></li>
        <li data-region="SG" data-language="en" data-region-label="Singapore" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Singapore - English</a></li>
      </ul>
      <ul class="regions">
        <li data-region="ZA" data-language="en" data-region-label="South Africa" data-language-label="English">
          <a href="#" hreflang="en" lang="en">South Africa - English</a></li>
        <li data-region="TW" data-language="en" data-region-label="Taiwan" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Taiwan - English</a></li>
        <li data-region="TW" data-language="zh" data-region-label="台灣" data-language-label="繁體中文">
          <a href="#" hreflang="zh" lang="zh">台灣 - 繁體中文</a></li>
        <li data-region="TH" data-language="en" data-region-label="Thailand" data-language-label="English">
          <a href="#" hreflang="en" lang="en">Thailand - English</a></li>
        <li data-region="TH" data-language="th" data-region-label="ประเทศไทย" data-language-label="ภาษาไทย">
          <a href="#" hreflang="th" lang="th">ประเทศไทย - ภาษาไทย</a></li>
        <li data-region="AE" data-language="en" data-region-label="United Arab Emirates"
            data-language-label="English">
          <a href="#" hreflang="en" lang="en">United Arab Emirates -  English</a></li>
        <li data-region="GB" data-language="en" data-region-label="United Kingdom" data-language-label="English">
          <a href="#" hreflang="en" lang="en">United Kingdom - English</a></li>
        <li data-region="US" data-language="en" data-region-label="United States" data-language-label="English">
          <a href="#" hreflang="en" lang="en">United States - English</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'i18n-setting',
    props: ['active'],
    data: function () {
      return {}
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .regions {
    display: block;
    float: left;
    padding: 1.2rem 0.6rem;
    width: 25%;
  }

  .regions li {
    font-size: 0.75rem;
    line-height: 0.75rem;
    text-align: left;
  }

  .regions-wrapper {
    display: block;
    margin: auto;
    padding: 0 1.8rem 0.6875rem;
    position: relative;
    width: 66rem;
  }

  .region-language-header {
    background-color: #fff;
    background-image: linear-gradient(to bottom, #f1f2f2, #fff);
    padding: 0 1.8rem;
    width: 100%;
  }

  .region-language-heading {
    border-top: 0 none;
    border-bottom: 1px solid #d7d7d7;
    color: #4c4c4c;
    font-size: 0.875rem;
    margin: 0 auto;
    padding: 1.4rem 1rem 0.875rem 0;
    position: relative;
    text-transform: none;
    width: 60rem;
  }

  .regions {
    display: block;
    float: left;
    padding: 1.2rem 0.6rem;
    width: 25%;
  }

  ul > li::before {
    color: #8e8573;
    font-size: 1.385em;
    left: 0;
    position: absolute;
    top: -4px;
  }

  .regions li {
    display: block;
    font-size: 0.75rem;
    line-height: 0.75rem;
    margin: 0;
    padding: 0.015rem 0;
    position: relative;
    text-align: left;
  }

  .regions li a {
    color: #0f748f;
    display: inline-block;
    padding: 0.39375rem 0.6rem 0.3rem;
    text-decoration: none;
    width: auto;
  }

  .regions-wrapper {
    display: block;
    margin: auto;
    padding: 0 1.8rem 0.6875rem;
    position: relative;
    width: 66rem;
  }

</style>
